<template>
    <Page>
        <Topbar hideMenu />
        <Content>
            <Panel>
                <view class="left">
                    <Info :data="workInfo" :state="state" backUrl="/pages/workbench/production/index"
                        @openCuttingPlan="openCuttingPlan" />
                </view>
                <view class="right" v-if="workInfo.state === '下发' || workInfo.state === '中断'">
                    <Empty text="请点击下方按钮进行工单操作..." />
                    <Button large type="primary" @click="open1">
                        {{ workInfo.state === '下发' ? '转产开始' : '恢复' }}
                    </Button>
                </view>
                <FormWrap header title="工单转产" v-if="workInfo.state === '转产中'">
                    <u--form :labelPosition="activeTab" :model="model" :rules="rules" ref="uForm" labelWidth="16rem"
                        :labelStyle="{'margin-bottom' : activeTab === 'top' ? '2rem' : '0'}" style="
                        margin-top: 2rem; padding: 0 5rem;">
                        <u-form-item label="转产时间">
                            {{ workInfo.changingTime }}
                        </u-form-item>
                        <u-form-item label="转产类型" prop="changingType">
                            <u-radio-group v-model="model.changingType" placement="row">
                                <u-radio v-for="(item, index) in list" :key="index" :label="item.label"
                                    :name="item.label">
                                </u-radio>
                            </u-radio-group>
                        </u-form-item>
                        <u--form :labelPosition="'left'" labelWidth="16rem" :labelStyle="{'margin-bottom' : '0'}" style="
                            margin-top: 2rem; ">
                            <view class="sub-title">
                                工单信息
                            </view>
                            <u-row justify="space-between">
                                <u-col span="5">
                                    <u-form-item label="转产前工单号" class="label-fwn">
                                        {{ workInfo.changeWorkCode }}
                                    </u-form-item>
                                    <u-form-item label="模具编号" class="label-fwn">
                                        {{ workInfo.changeMoldCode }}
                                    </u-form-item>
                                    <u-form-item label="产品编号" class="label-fwn">
                                        {{ workInfo.changeMaterialCode }}
                                    </u-form-item>
                                </u-col>
                                <u-col span="5">
                                    <u-form-item label="转产后工单号" class="label-fwn">
                                        {{ workInfo.workCode }}
                                    </u-form-item>
                                    <u-form-item label="模具编号" class="label-fwn">
                                        {{ workInfo.moldCode }}
                                    </u-form-item>
                                    <u-form-item label="产品编号" class="label-fwn">
                                        {{ workInfo.materialCode }}
                                    </u-form-item>
                                </u-col>
                            </u-row>
                        </u--form>
                        <u-form-item label="备注" prop="changingRemarks">
                            <InputField v-model="model.changingRemarks" :maxlength="100" />
                        </u-form-item>
                    </u--form>
                    <template slot="footer">
                        <Button large type="success" @click="open2">
                            中断
                        </Button>
                        <Button large type="primary" @click="open3" style="margin-left: 3rem;">
                            转产完成
                        </Button>
                    </template>
                </FormWrap>
            </Panel>
        </Content>
        <Modal :title="workInfo.state==='下发'? '确认开始转产吗？' : '确认恢复转产吗？'" ref="popup1" @confirm="confirm1" />
        <!-- <Modal title="确认中断吗？" ref="popup2" @confirm="confirm2" /> -->
        <Modal title="请选择中断原因" ref="popup2" @confirm="confirm2">
            <uni-data-select v-model="interruptReason" label="中断原因" :modelValue="interruptReason"
                :localdata="interruptReasons" format="{label}" placeholder="请选择" :clear="false"></uni-data-select>
        </Modal>
        <Modal title="确认转产完成吗？" ref="popup3" @confirm="confirm3" />
        <ModalCuttingPlan ref="modalCuttingPlan" @openModalPrintLabel="openModalPrintLabel"></ModalCuttingPlan>
        <ModalPrintLabel ref="modalPrintLabel" :labelTypes="[{label: '条料标签',value: '条料标签'}]"></ModalPrintLabel>
    </Page>
</template>

<script>
    import Info from "@/components/info/index.vue";
    import Page from "@/components/page/index.vue";
    import Topbar from "@/components/topbar/index.vue";
    import Content from "@/components/content/index.vue";
    import Panel from "@/components/panel/index.vue";
    import Empty from "@/components/empty/index.vue";
    import Button from "@/components/button/index.vue";
    import FormWrap from '@/components/formWrap/index.vue';
    import InputField from '@/components/formField/inputField/index.vue';
    import InputCaptcheField from '@/components/formField/inputCaptcheField/index.vue';
    import InputNumberField from '@/components/formField/inputNumberField/index.vue';
    import NumberBoxField from '@/components/formField/numberBoxField/index.vue';
    import DatePicker from '@/components/formField/datePicker/index.vue';
    import Modal from '@/components/modal/index.vue';
    import ModalCuttingPlan from '@/components/operate/modal-material-cutting-plan/index.vue';
    import ModalPrintLabel from '@/components/operate/modal-print-label/index.vue';
    import fetch from "@/utils/fetch";

    export default {
        components: {
            Page,
            Topbar,
            Content,
            Panel,
            Info,
            Empty,
            Button,
            FormWrap,
            InputField,
            InputCaptcheField,
            InputNumberField,
            NumberBoxField,
            DatePicker,
            Modal,
            ModalCuttingPlan,
            ModalPrintLabel
        },
        data() {
            return {
				state:'',
				flag:null,
                interruptReasons: [],
                interruptReason: '',
                workInfo: {},
                activeTab: 'top',
                list: [{
                        label: '换模转产',
                        value: '换模转产', //uni-data-select的下拉数组必须有value
                    },
                    {
                        label: '换料转产',
                        value: '换料转产',
                    },
                    {
                        label: '产品更换转产',
                        value: '产品更换转产',
                    },
                ],
                model: {
                    changingType: '换模转产',
                    changingRemarks: ''
                },
                rules: {},
            }
        },
        methods: {
            getWorkOrderInfo(workCode) {
                fetch('get', '/dms/mobile/selectWorkByWorkCode', {
                    workCode
                }).then((res) => {
					this.$set(this,'workInfo',{
						...res,
						state:this.state || res.state,
					})
					this.state=this.state || res.state;
                });
            },
            openCuttingPlan() {
                this.$refs['modalCuttingPlan'].open(this.workInfo.cuttingPlanCode);
            },
            openModalPrintLabel(item) {
                this.$refs['modalPrintLabel'].open(item);
            },
            open1() {
                this.$refs.popup1.open()
            },
            open2() {
                this.$refs.popup2.open()
            },
            open3() {
                this.$refs.popup3.open()
            },
            confirm1() {
                if (this.workInfo.state === '下发') {
                    fetch('put', '/dms/mobile/startChangeProduc', {
                        workCode: this.workInfo.workCode
                    }).then(() => {
                        this.$toast('工单开始转产成功');
						this.state=null;
						this.flag=null;
                        this.getWorkOrderInfo(this.workInfo.workCode);
                    });
                } else {
                    fetch('put', '/dms/mobile/restoreInterrupt', {
                        workCode: this.workInfo.workCode
                    }).then(() => {
                        this.$toast('工单恢复成功');
						this.state=null;
						this.flag=null;
                        this.getWorkOrderInfo(this.workInfo.workCode);
                    });
                }
            },
            confirm2() {
                fetch('put', '/dms/mobile/interrupt', {
                    workCode: this.workInfo.workCode,
                    interruptReason: this.interruptReason,
                }).then(() => {
                    this.$toast('工单中断成功');
					this.state=null;
					this.flag=null;
                    this.getWorkOrderInfo(this.workInfo.workCode);
                });
            },
            confirm3() {
                fetch('put', '/dms/mobile/changeProducFinish', {
                    workCode: this.workInfo.workCode,
                    changingType: this.model.changingType,
                    changingRemarks: this.model.changingRemarks,
                }).then(() => {
                    this.$toast('工单转产完成');
					this.state=null;
					this.flag=null;
					this.switchPage(this.workInfo);
                   
                });
            },
			switchPage(item){
				fetch('get','/dms/mobile/jumpFlow',{workCode:item.workCode}).then(res=>{
					if(res==false){
						this.goto('/pages/workbench/production/debug/index?workCode=' + item.workCode);
					}else{
						switchStatus(res,true)
					}
				})
				let url="";
				const switchStatus=(state,flag)=>{
					switch (state) {
						case '下发':
							url = '/pages/workbench/production/change/index?workCode=' + item.workCode;
							break;
						case '转产中':
							url = '/pages/workbench/production/change/index?workCode=' + item.workCode;
							break;
						case '转产完成':
							url = '/pages/workbench/production/debug/index?workCode=' + item.workCode;
							break;
						case '调机中':
							url = '/pages/workbench/production/debug/index?workCode=' + item.workCode;
							break;
						case '调机中断':
							url = '/pages/workbench/production/debug/index?workCode=' + item.workCode;
							break;
						case '调机完成':
							url = '/pages/workbench/production/exec/index?workCode=' + item.workCode;
							break;
						case '生产':
							url = '/pages/workbench/production/exec/index?workCode=' + item.workCode;
							break;
						case '完成':
							url = '/pages/workbench/production/stripping/index?workCode=' + item.workCode;
							break;
						case '中断':
							url = '/pages/workbench/production/interrupt/index?workCode=' + item.workCode;
							break;
						default:
							url = '';
					}
					if (url !== '') {
						if (flag) {
							this.goto(url+'&state='+state+'&flag=true');
						}else this.goto(url);
					} else {
						this.$toast('工单已拆模或暂停');
					}
				}
			},
            goto(url) {
                uni.redirectTo({
                    url,
                    animationType: "pop-in",
                    animationDuration: 1000,
                })
            },
            getInterruptReasons() {
                fetch("get", "/dms/faultCategory/dictList", {
                    name: "中断原因",
                }).then((res) => {
                    this.interruptReasons = res.map(item => {
                        return {
                            label: item.value,
                            value: item.value
                        }
                    });
                    if (this.interruptReasons.length !== 0)
                        this.interruptReason = this.interruptReasons[0].value;
                });
            }
        },
        onLoad(params) {
			this.state=params.state || null;
			this.flag=params.flag || null;
            this.getWorkOrderInfo(params.workCode);
            this.getInterruptReasons();
        }
    };
</script>

<style scoped lang="scss">
    .left {
        flex: 0 auto;
        width: 50rem;
        background: #f8f8fa;
    }

    .right {
        flex: 1;
        background-color: red;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 3rem 4rem 5rem;
    }

    .label-top {
        /deep/ .u-form-item__body__left {
            align-items: flex-start !important;
            margin-top: 2rem;
        }
    }

    .label-fwn {
        /deep/ .u-form-item__body__left__content__label {
            font-weight: normal !important;
        }
    }

    .sub-title {
        padding: 3rem 0;
        font-size: 2.2rem;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        margin: 2rem 0;
    }

    /deep/ .form-wrap .body {
        flex: 1;
    }
</style>